<template>
  <div class="container">
    <!-- 头部导航 -->
    <van-nav-bar
      title="课程详情"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 标头图片 -->
    <div class="top-img-con">
      <img v-lazy="pic" />
    </div>
    <!-- 课程信息展示 -->
    <van-tabs v-model="activeName" animated >
      <van-tab title="课程介绍" name="a">
        <!-- 商品介绍 -->
        <sessionIntro ></sessionIntro>
        </van-tab>
      <van-tab title="目录" name="b">
        <sessionList></sessionList>
      </van-tab>
      <van-tab title="推荐" name="c">
        <commandList></commandList>
      </van-tab>
    </van-tabs>
    <!-- 立即学习按钮 -->
    <div class="learnNow">
        <button>立即学习</button>
    </div>
  </div>
</template>

<script>
import sessionIntro from './ui/sessionIntro.vue';
import sessionList from './ui/sessionList.vue';
import commandList from './ui/commandList.vue';
import {get,post} from "@/utils/http"
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      pic: "https://img1.baidu.com/it/u=1089167983,4158353001&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=388",
      activeName: 'a',
      
    };
  },
  components:{sessionIntro,sessionList,commandList},

  methods: {
    onClickLeft() {
      this.$router.back();
    },
    ...mapMutations("detail",["setSessoinData","setTeacherData"])
  },
  async mounted() {
    //先通过课程id 获取课程信息
    let data = await get("/session/detail/"+this.$route.params.id)
    this.setSessoinData(data)
    // 再通过课程中的教师id获取教师信息
    let teacher = await get("/teacher/"+data.intro.teacher)
    this.setTeacherData(teacher)
    // 告知vuex开始加载
    this.$store.dispatch("detail/getCommand",data.recommend)
    
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: rgb(237, 236, 236);
  height: 602px;
  overflow-y: auto;
  .top-img-con {
    height: 200px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 80%;
      height: 80%;
    }
  }
}
::v-deep .van-tabs__line{
  width: 100px !important;
  background-color: rgba(102, 110, 232, 1);
}
// 4 0  20
.learnNow{
  width: 100%;
  height: 73px; 
  background: rgb(255, 255, 255);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  button{
    width: 335px;
    height: 40px;
    border: none;
    background-color: rgba(102, 110, 232, 1);
    border-radius: 20px;
    color: white;
    text-align: center;
    line-height: 40px;
  }
}
</style>